Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.
Path: blob/master/src/packages/next/pages/lang/[locale]/index.tsx
Views: 791
/*1* This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.2* License: MS-RSL – see LICENSE.md for details3*/45import { DownOutlined } from "@ant-design/icons";6import type { MenuProps } from "antd";7import { Button, Dropdown, Layout } from "antd";89import { GetServerSidePropsContext } from "next";1011import Trans from "next-translate/Trans";12import useTranslation from "next-translate/useTranslation";1314import { getI18nMessages } from "locales/lib";15import { LOCALE, query2locale } from "locales/misc";1617// The I18nProvider is either english by default, or based on the query path: /lang/[locale]18import I18nProvider from "next-translate/I18nProvider";1920import AIAvatar from "@cocalc/frontend/components/ai-avatar";21import { LOCALIZATIONS } from "@cocalc/util/i18n";22import { COLORS } from "@cocalc/util/theme";2324import Content from "components/landing/content";25import Footer from "components/landing/footer";26import Head from "components/landing/head";27import Header from "components/landing/header";28import Image from "components/landing/image";29import Info from "components/landing/info";30import Pitch from "components/landing/pitch";31import { Tagline } from "components/landing/tagline";32import { SHADOW } from "components/landing/util";33import Logo from "components/logo";34import { CSS, Paragraph, Title } from "components/misc";35import A from "components/misc/A";36import { Customize, useCustomize } from "lib/customize";37import withCustomize from "lib/with-customize";38import basePath from "lib/base-path";3940import SAGEMATH_JUPYTER from "public/cocalc-sagemath-2024-11-22-nq8.png";41import assignments from "public/features/cocalc-course-assignments-2019.png";42import LatexEditorImage from "public/features/cocalc-latex-editor-2019.png";43import RTC from "public/features/cocalc-real-time-jupyter.png";44import CHATROOM from "/public/features/chatroom.png";45import JupyterTF from "/public/features/cocalc-jupyter2-20170508.png";46import terminal from "/public/features/terminal.png";47import { join } from "path";4849const HEADER_LEVEL = 3;5051function Nav() {52const { t, lang } = useTranslation("index");5354const items: MenuProps["items"] = [...LOCALE]55.sort((a, b) => LOCALIZATIONS[a].name.localeCompare(LOCALIZATIONS[b].name))56.map((locale, idx) => {57const l = LOCALIZATIONS[locale];58return {59key: idx,60label: (61<A href={`/${locale}`}>62{l.flag} {l.native} ({l.name})63</A>64),65};66});6768const l = LOCALIZATIONS[lang];69const color = COLORS.GRAY_DD;70return (71<div72style={{73padding: "5px 20px",74backgroundColor: COLORS.YELL_LLL,75color,76}}77>78{t("translated-info", {79lang: l.native,80})}{" "}81<A href={"/"}>{t("home-page")}</A>.82<span style={{ float: "right" }}>83<Dropdown84menu={{ items }}85trigger={["click"]}86placement={"bottomRight"}87overlayStyle={{ maxHeight: "75vh", overflow: "auto", ...SHADOW }}88>89<a onClick={(e) => e.preventDefault()} style={{ color }}>90{l.flag} {l.native} ({l.name}) <DownOutlined />91</a>92</Dropdown>93</span>94</div>95);96}9798function Features() {99const { onCoCalcCom } = useCustomize();100const { t } = useTranslation("index");101102function vendorOpenWorld() {103return (104<Pitch105style={{ backgroundColor: COLORS.YELL_LLL }}106col1={107<Info108anchor="a-vendor-lockin"109icon="lock"110level={HEADER_LEVEL}111title={t("no-vendor-lockin")}112>113<Trans114i18nKey="index:no-vendor-lockin-text"115components={{ ul: <ul />, li: <li />, strong: <strong /> }}116/>117</Info>118}119col2={120<Info121anchor="a-open-world"122icon="global"123level={HEADER_LEVEL}124title={t("open-world-title")}125>126<Trans127i18nKey="index:open-world-text"128components={{ ul: <ul />, li: <li />, strong: <strong /> }}129/>130</Info>131}132/>133);134}135136function realtimeChat() {137return (138<Pitch139style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}140col1={141<Info142level={HEADER_LEVEL}143title={t("realtime-collaboration")}144icon="users"145anchor="a-realtimesync"146style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}147belowWide={true}148icons={[149{ icon: "jupyter", link: "/features/jupyter-notebook" },150{ icon: "tex", title: "LaTeX", link: "/features/latex-editor" },151{152icon: "slides",153title: "Whiteboard",154link: "/features/whiteboard",155},156]}157>158<Paragraph>159<Image shadow alt={"Realtime collaboration"} src={RTC} />160</Paragraph>161<Trans162i18nKey="index:realtime-collaboration-text"163components={{ strong: <strong />, p: <Paragraph /> }}164/>165</Info>166}167col2={168<Info169level={HEADER_LEVEL}170title={t("chat-title")}171icon="comment"172anchor="a-chat-title"173style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}174belowWide={true}175icons={[176{ icon: "comment", link: "https://doc.cocalc.com/chat.html" },177{178icon: <AIAvatar size={32} />,179title: "LLM",180link: "/features/ai",181},182]}183>184<Paragraph>185<Image shadow alt={"Chatroom"} src={CHATROOM} />186</Paragraph>187<Trans188i18nKey="index:chat-text"189components={{190p: <Paragraph />,191ul: <ul />,192li: <li />,193strong: <strong />,194A: <A href="https://doc.cocalc.com/chat.html" />,195}}196/>197</Info>198}199/>200);201}202203function softwareCompute() {204return (205<Pitch206style={{ backgroundColor: COLORS.YELL_LLL }}207col1={208<Info209level={HEADER_LEVEL}210title={t("many-languages")}211icon="flow-chart"212anchor="a-many-languages"213icons={[214{ icon: "julia", link: "/features/julia" },215{ icon: "linux", link: "/features/linux" },216{ icon: "python", link: "/features/python" },217{ icon: "r", link: "/features/r-statistical-software" },218{ icon: "sagemath", title: "SageMath", link: "/features/sage" },219{ icon: "octave", link: "/features/octave" },220]}221>222<Trans223i18nKey="index:many-languages-text"224components={{225strong: <strong />,226a: <A href="https://doc.cocalc.com/howto/index.html" />,227}}228/>229</Info>230}231col2={232<Info233level={HEADER_LEVEL}234title={t("compute-servers-title")}235icon="server"236anchor="a-compute-servers"237icons={[238{239icon: "nvidia",240title: "GPUs",241link: "https://doc.cocalc.com/compute_server.html",242},243{244icon: "pytorch",245title: "PyTorch",246link: "https://doc.cocalc.com/compute_server.html",247},248{249icon: "tensorflow",250title: "TensorFlow",251link: "https://doc.cocalc.com/compute_server.html",252},253{254icon: "vscode",255title: "VS Code",256link: "https://doc.cocalc.com/vscode.html",257},258{259icon: "desktop",260title: "X11 Desktop",261link: "features/x11",262},263{264icon: "terminal",265title: "Linux Terminal",266link: "features/terminal",267},268]}269>270<Trans271i18nKey="index:compute-servers-text"272components={{273strong: <strong />,274p: <Paragraph />,275A1: <A href="https://doc.cocalc.com/compute_server.html" />,276A2: (277<A href="https://github.com/sagemathinc/cocalc-howto/blob/main/README.md" />278),279}}280/>281</Info>282}283/>284);285}286287function jupyterLatex() {288return (289<Pitch290style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}291col1={292<Info293level={HEADER_LEVEL}294title={t("jupyter-notebook-title")}295icon="jupyter"296anchor="a-jupyter-notebook"297wide298style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}299icons={[300{ icon: "jupyter", link: "/features/jupyter-notebook" },301{302icon: "pencil",303title: "NBGrader",304link: "https://doc.cocalc.com/teaching-nbgrader.html",305},306{307icon: <AIAvatar size={32} />,308title: "LLM",309link: "/features/ai",310},311]}312>313<Paragraph>314<Image shadow alt={"Jupyter Notebook"} src={JupyterTF} />315</Paragraph>316<Trans317i18nKey="index:jupyter-notebook-text"318components={{319strong: <strong />,320a: <A href="/features/jupyter-notebook" />,321A2: <A href="/features/teaching" />,322AI: <A href="/features/ai" />,323li: <li />,324ul: <ul />,325p: <Paragraph />,326}}327/>328</Info>329}330col2={331<Info332level={HEADER_LEVEL}333title={t("latex-editor-title")}334icon="tex"335anchor="a-latex-editor"336wide337style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}338icons={[339{ icon: "tex", title: "LaTeX", link: "/features/latex-editor" },340]}341>342<Paragraph>343<Image shadow alt={"LaTeX Editor"} src={LatexEditorImage} />344</Paragraph>345<Trans346i18nKey="index:latex-editor-text"347components={{348strong: <strong />,349a: <A href="/features/latex-editor" />,350li: <li />,351ul: <ul />,352p: <Paragraph />,353}}354/>355</Info>356}357/>358);359}360361function teachingLinux() {362return (363<Pitch364style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}365col1={366<Info367level={HEADER_LEVEL}368title={t("linux-title")}369icon="jupyter"370anchor="a-linux"371wide372style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}373icons={[374{375icon: "terminal",376title: "Linux Terminal",377link: "/features/terminal",378},379{ icon: "servers", title: "Software", link: "/software" },380]}381>382<Paragraph>383<Image shadow alt={"Linux Terminal"} src={terminal} />384</Paragraph>385<Trans386i18nKey="index:linux-text"387components={{388strong: <strong />,389A: <A href="/features/terminal" />,390A2: <A href="/software/executables" />,391li: <li />,392ul: <ul />,393p: <Paragraph />,394}}395/>396</Info>397}398col2={399<Info400level={HEADER_LEVEL}401title={t("teaching-title")}402icon="graduation-cap"403anchor="a-teaching"404wide405style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}406icons={[407{408icon: "graduation-cap",409title: "Teaching",410link: "/features/teaching",411},412{413icon: "pencil",414title: "NBGrader",415link: "https://doc.cocalc.com/teaching-nbgrader.html",416},417]}418>419<Paragraph>420<Image421shadow422alt={"CoCalc Course Management"}423src={assignments}424/>425</Paragraph>426<Trans427i18nKey="index:teaching-text"428components={{429strong: <strong />,430A: <A href="/features/teaching" />,431li: <li />,432ul: <ul />,433p: <Paragraph />,434}}435/>436</Info>437}438/>439);440}441442function gettingStarted() {443const style: CSS = { color: COLORS.GRAY_LL } as const;444445if (onCoCalcCom) {446return (447<Pitch448title={t("getting-started")}449style={{ backgroundColor: COLORS.BLUE_D, ...style }}450col1={451<Info452level={HEADER_LEVEL}453title={t("gettingstarted-saas")}454anchor="a-saas"455style={{ backgroundColor: COLORS.BLUE_D }}456textStyle={style}457>458<Trans459i18nKey="index:gettingstarted-saas-text"460components={{461strong: <strong />,462A2: <A style={style} href="/auth/sign-up" />,463A: <A style={style} href="/store" />,464li: <li style={style} />,465ul: <ul />,466p: <Paragraph style={style} />,467}}468/>469<Paragraph style={{ textAlign: "center" }}>470<Button471ghost472size="large"473style={{ fontWeight: "bold" }}474onClick={() =>475(window.location.href = join(basePath, "/auth/sign-up"))476}477title={t("sign-up")}478>479{t("sign-up")}480</Button>481</Paragraph>482</Info>483}484col2={485<Info486level={HEADER_LEVEL}487title={t("gettingstarted-onprem")}488anchor="a-onprem"489style={{ backgroundColor: COLORS.BLUE_D }}490textStyle={style}491>492<Trans493i18nKey="index:gettingstarted-onprem-text"494components={{495strong: <strong />,496A: <A style={style} href="https://onprem.cocalc.com" />,497li: <li style={style} />,498ul: <ul />,499p: <Paragraph style={style} />,500}}501/>502<Paragraph style={{ textAlign: "center" }}>503<Button504ghost505size="large"506style={{ fontWeight: "bold" }}507onClick={() =>508(window.location.href = join(basePath, "/pricing/onprem"))509}510title={"On-Premises"}511>512{t("gettingstarted-onprem")}513</Button>514</Paragraph>515</Info>516}517/>518);519} else {520return (521<Info522level={HEADER_LEVEL}523title={t("getting-started")}524anchor="a-signup"525style={{ backgroundColor: COLORS.BLUE_D }}526textStyle={style}527>528<Trans529i18nKey="index:gettingstarted-signup-text"530components={{531strong: <strong />,532A: <A style={style} href="/auth/sign-up" />,533li: <li />,534ul: <ul />,535p: <Paragraph style={{ ...style, textAlign: "center" }} />,536}}537/>538<Paragraph style={{ textAlign: "center" }}>539<Button540ghost541size="large"542style={{ fontWeight: "bold" }}543onClick={() =>544(window.location.href = join(basePath, "/auth/sign-up"))545}546title={t("sign-up")}547>548{t("sign-up")}549</Button>550</Paragraph>551</Info>552);553}554}555556return (557<>558{realtimeChat()}559{softwareCompute()}560{jupyterLatex()}561{vendorOpenWorld()}562{teachingLinux()}563{gettingStarted()}564</>565);566}567568function Hello({ customize }) {569const { t } = useTranslation("index");570571const { siteName } = customize;572573function intro() {574return (575<>576<Title level={2}>{t("intro")}</Title>{" "}577<Paragraph>578<Trans i18nKey="index:intro-1" components={{ strong: <strong /> }} />579</Paragraph>580<Paragraph>581<Image582alt={t('screenshot')}583src={SAGEMATH_JUPYTER}584shadow={true}585/>586</Paragraph>587</>588);589}590591return (592<>593<Head title={`${t("site-description")} – ${siteName}`} />594<Layout>595<Header />596<Nav />597<Layout.Content style={{ backgroundColor: "white" }}>598<Content599style={{ minHeight: "30vh" }}600body={<Logo type="full" style={{ width: "50%" }} />}601title={siteName}602subtitle={t("site-description")}603imageAlternative={intro()}604/>605<Tagline value={t("tagline")} style={{ padding: "5px" }} />606<Features />607<Nav />608<Footer />609</Layout.Content>610</Layout>611</>612);613}614615export default function I18NIndexPage({ customize, locale, messages }) {616return (617<Customize value={customize}>618<I18nProvider lang={locale} namespaces={messages}>619<Hello customize={customize} />620</I18nProvider>621</Customize>622);623}624625export async function getServerSideProps(context: GetServerSidePropsContext) {626const locale = query2locale(context.query);627const messages = await getI18nMessages(locale);628629return withCustomize({630context,631props: { locale, messages },632});633}634635636